<template>
    <div class="shop-index">
        <div class="shop-main">
            <!-- 1. 目前是一张，以后多张，所以封装成首页轮播图组件，方便复用 -->
            <banner :banner-list="myBannerList"></banner>
            <!-- 2. 商城搜索组件 -->
            <search></search>
            <!-- 3. 首页产品中心 -->
            <div class="product-center">
                <h1>产品中心</h1>
                <h2>汽车电池研发、生产、制造的专业提供商</h2>
                <nav>
                    <a href="javascript:;">
                        电池
                    </a>
                    <a href="javascript:;">
                        配件
                    </a>
                    <a href="javascript:;">
                        汽车
                    </a>
                    <a href="javascript:;">
                        其他
                    </a>
                </nav>
                <button @click.stop="moreProductHandle()">所有产品</button>
            </div>
            <!-- 4. 精品推荐，从父级传递不同的数据到子级即可 - 组件复用 -->
            <!-- :boutique-list="boutiqueList" -->
            <shop-list title="精品推荐"></shop-list>
            <!-- 5. 一个广告位图 -->
            <div class="poster-pic">
                <img src="/images/bananer_01.png" alt="广告位图" title="广告位图" />
            </div>
            <!-- 6. 更多产品，从父级传递不同的数据到子级即可 - 组件复用 -->
            <!-- :boutique-list="moreProductList" -->
            <shop-list title="更多产品"></shop-list>
            <!-- 7. 放置一个空的div -->
            <div class="empty-div"></div>
            <!-- 8. 实名认证组件 -->
            <real-name-auth-popup ref="rna" @my-event="underHandle()"></real-name-auth-popup>
        </div>
        <!-- 9. 遮罩层 -->
        <div ref="maskLayer" class="maskLayer" :class="{ 'mask': showMask }" @touchmove.prevent></div>
    </div>
</template>

<script>
    // 公用的轮播图组件
    import Banner from '@/components/rotationChart/Banner';

    // 公用的商城搜索组件
    import Search from '@/components/search/Search';

    // 公用的商品列表布局
    import ShopList from '@/components/shop/ShopList';

    // 引入实名认证组件
    import RealNameAuthPopup from '@/components/auth/RealNameAuthPopup';

    export default {
        name: 'shopHome',
        watch: {

        },
        created() {

        },
        mounted() {
            this.hiddenElement();
        },
        data() {
            return {
                // 是否显示遮罩层
                showMask: false,
                // 商品首页轮播图
                myBannerList: [{
                        id: 1,
                        title: '首页轮播图1',
                        url: '/images/homeBanner.png'
                    },
                    {
                        id: 2,
                        title: '首页轮播图2',
                        url: '/images/homeBanner.png'
                    },
                    {
                        id: 3,
                        title: '首页轮播图3',
                        url: '/images/homeBanner.png'
                    },
                    {
                        id: 4,
                        title: '首页轮播图4',
                        url: '/images/homeBanner.png'
                    },
                    {
                        id: 5,
                        title: '首页轮播图5',
                        url: '/images/homeBanner.png'
                    }
                ]
                // // 精品推荐列表数据
                // boutiqueList: [{
                //         id: 1,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片111',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-111111',
                //         price: 569,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 2,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片222',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-222222',
                //         price: 1388,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 3,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片333',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-333333',
                //         price: 8921,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 4,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片444',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-444444',
                //         price: 4569,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 5,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片555',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-555555',
                //         price: 88888,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 6,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片666',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-666666',
                //         price: 7459,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 7,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片777',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-777777',
                //         price: 222,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 8,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片888',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-888888',
                //         price: 3496210,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 9,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片999',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-999999',
                //         price: 99999999,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 10,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片10',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-101010101010',
                //         price: 10000,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 11,
                //         imgUrl: '/images/productImage_01.png',
                //         imgTitle: '商品图片11',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-111111111111',
                //         price: 569111111,
                //         createTime: Date.now()
                //     }
                // ],
                // // 更多产品列表数据
                // moreProductList: [{
                //         id: 1,
                //         imgUrl: '/images/productImage_02.png',
                //         imgTitle: '商品图片aaa',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-aaaaaa',
                //         price: 258,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 2,
                //         imgUrl: '/images/productImage_02.png',
                //         imgTitle: '商品图片bbb',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-bbbbbb',
                //         price: 15632,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 3,
                //         imgUrl: '/images/productImage_02.png',
                //         imgTitle: '商品图片ccc',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-cccccc',
                //         price: 8465,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 4,
                //         imgUrl: '/images/productImage_02.png',
                //         imgTitle: '商品图片ddd',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-dddddd',
                //         price: 789456,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 5,
                //         imgUrl: '/images/productImage_02.png',
                //         imgTitle: '商品图片eee',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-eeeeee',
                //         price: 454921,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 6,
                //         imgUrl: '/images/productImage_02.png',
                //         imgTitle: '商品图片fff',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-ffffff',
                //         price: 2000045,
                //         createTime: Date.now()
                //     },
                //     {
                //         id: 7,
                //         imgUrl: '/images/productImage_02.png',
                //         imgTitle: '商品图片ggg',
                //         title: '金瑞玛固态电池-电池型号JRM-GC-gggggg',
                //         price: 594,
                //         createTime: Date.now()
                //     }
                // ]
            };
        },
        methods: {
            // 显示您还没有实名认证的弹框
            moreProductHandle() {
                this.showMask = true;
                this.$refs.rna.isShowLayer = true;
            },
            // 隐藏您还没有实名认证的弹框
            moreProductHiddenHandle() {
                this.showMask = false;
                this.$refs.rna.isShowLayer = false;
            },
            // 点击空白区域隐藏元素
            hiddenElement() {
                this.$refs['maskLayer'].addEventListener('click', ev => {
                    this.moreProductHiddenHandle();
                }, false);
            },
            // 点击了子级的朕知道了
            underHandle() {
                this.moreProductHiddenHandle();
            }
        },
        computed: {

        },
        components: {
            Banner,
            Search,
            ShopList,
            RealNameAuthPopup
        }
    };

</script>

<style lang="scss" scoped>
    .shop-main {
        height: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background-color: #f4f4f4;

        .product-center {
            width: 100%;
            text-align: center;
            margin: 50px 0 38px 0;
            padding: 0 64px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;

            h1 {
                font-weight: bold;
                font-size: 38px;
                line-height: 62px;
                color: #333;
            }

            h2 {
                font-weight: bold;
                font-size: 18px;
                line-height: 56px;
                color: #999;
                margin-top: 10px;
            }

            nav {
                display: flex;
                display: -webkit-flex;
                flex-direction: row;
                -webkit-flex-direction: row;
                justify-content: center;
                -webkit-justify-content: center;
                margin-top: 36px;

                a {
                    width: 94px;
                    height: 94px;
                    font-weight: bold;
                    font-size: 24px;
                    color: #666;
                    flex: 1;
                    -webkit-flex: 1;
                    padding-top: 114px;

                    &:first-of-type {
                        background: url(/images/battery.png) no-repeat center top;
                        background-size: 94px 94px;
                    }

                    &:nth-of-type(2) {
                        background: url(/images/accessories.png) no-repeat center top;
                        background-size: 94px 94px;
                    }

                    &:nth-of-type(3) {
                        background: url(/images/car.png) no-repeat center top;
                        background-size: 94px 94px;
                    }

                    &:last-of-type {
                        background: url(/images/other.png) no-repeat center top;
                        background-size: 94px 94px;
                    }
                }
            }

            button {
                display: inline-block;
                width: 250px;
                height: 50px;
                background-color: #2fe4e0;
                border-radius: 25px;
                font-weight: bold;
                font-size: 24px;
                font-stretch: normal;
                line-height: 50px;
                letter-spacing: 1px;
                color: #fff;
                margin-top: 80px;
                position: relative;
                z-index: 95;
            }
        }

        .poster-pic {
            width: 100%;
            background-color: #f4f4f4;
            padding: 20px 0;

            img {
                width: 100%;
                height: 275px;
            }
        }

        .empty-div {
            height: 20px;
            background-color: #f4f4f4;
        }
    }

    .mask {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999998;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
    }

</style>
